<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>海外银行卡</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #f5f5f5;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
            position: relative;
        }

        .showbanK {
            width: 100%;
            height: auto;
            background: #fff;
        }

        .addBankCard li {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            height: 0.88rem;
            justify-content: space-between;
            padding: 0 0.24rem;
            box-sizing: border-box;
        }

        .addBankCard li:not(:last-of-type) {
            border-bottom: 1px solid #e5e5e5;
        }

        .addBankCard li>span {
            display: flex;
            display: -webkit-flex;
            height: 0.88rem;
            align-items: center;
            width: 2rem;
            font-size: 0.28rem;
            color: #181818;
        }

        input {
            flex: 1;
            border: none;
            outline: none;
            height: 0.7rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-left: 0.15rem;
            font-size: 0.3rem;
        }

        input::-webkit-input-placeholder {
            font-size: 0.27rem;
            color: #b1b1b1;
        }

        select {
            appearance: none;
            -webkit-appearance: none;
            background-color: #fff;
            border: none;
            outline: none;
        }

        #getcode {
            width: 2.8rem;
            height: 0.7rem;
            text-align: center;
            line-height: 0.7rem;
            background-color: #ffd203;
            border-radius: 0.1rem;
            font-size: 0.26rem;
            color: rgba(33, 33, 33, 0.68);
        }

        .tips {
            margin-top: 0.1rem;
            padding-left: 0.24rem;
            color: #b5b5b5;
        }

        #delegate {
            width: 6.88rem;
            height: 0.88rem;
            font-size: 0.3rem;
            background-color: #ffd203;
            text-align: center;
            line-height: 0.88rem;
            outline: none;
            border: none;
            border-radius: 0.1rem;
            margin: auto;
        }

        #addchooseBank span::after {
            border-top: 0.15rem solid #e2e2e2;
            border-right: 0.15rem solid transparent;
            border-left: 0.15rem solid transparent;
            content: "";
            position: absolute;
            width: 0;
            right: 5%;
            top: 40%;
        }
    </style>
</head>

<body>
    <div class="showbanK">
        <ul class="addBankCard">
            <li>
                <span>
                    卡号
                </span>
                <input type="text" id="bankcard" placeholder="银行卡号">
            </li>
            <li>
                <span>
                    持卡人姓名
                </span>
                <input type="text" name="" id="idname" name="owner_name" type="text" placeholder="持卡人姓名">
            </li>
            <li>
                <span>
                    银行名称
                </span>
                <input type="text" id="khh" type="text" placeholder="请输入海外银行卡名称">
            </li>
            <li>
                <span>
                    swift code
                </span>
                <input type="text" id="swiftCode" type="text" placeholder="请输入银行卡上编码">
            </li>
            <li>
                <span>
                    验证码
                </span>
                <input type="text" id="code" style="margin-left:0.48rem;" maxlength="6" placeholder="请输入验证码"
                    oninput="this.value=this.value.replace(/\D/g, '')">
                <button id="getcode" style="border: none;outline: none;font-size:0.24rem">
                    获取验证码
                </button>
            </li>
        </ul>
    </div>
    <p class="tips">
        提示:暂不支持信用卡
    </p>
    <div style="width:100%;text-align:center;margin-top: 0.8rem;">
        <button id="delegate">
            提交
        </button>
    </div>
</body>

<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var thisArr = api.pageParam.isdataArr;
        if (thisArr) {
            var newArr = thisArr.filter(function (item) {
                return item.id != "CNY"
            });
        }
        var temp = doT.template($("#listT").text());
        $("#chooseBankType").html(temp(newArr));
        $("#chooseBankType option:first-of-type").prop("selected", true);
        if (app.ST == "ios") {
            $('input').click(function () {
                $(this).focus().select(); //保险起见，还是加上这句。
                $(this).selectionStart = 0;
                $(this).selectionEnd = $(this).val().length;
            })
        }
        if (app.isiPhone10) {
            $(".pabo").show();
            $('.h20').height('30px')
        }
        app.log("add_card", "添加卡页面");
        var currencyCode = api["pageParam"]["getChoose"];
        var isopenSelect = api.pageParam.isopenSelect;
        if (isopenSelect == "open") {
            $("#addchooseBank").show();
        }
        // 设置数据
        if (api["pageParam"]["idname"]) {
            $("#idname").val(api["pageParam"]["idname"]);
        }

        if (api["pageParam"]["bankard"]) {
            $("#bankcard").val(api["pageParam"]["bankard"].replace(/(.{4})/g, "$1 "));
        }
        if (api["pageParam"]["swiftCode"]) {
            $("#swiftCode").val(api["pageParam"]["swiftCode"]);
        }
        if (api["pageParam"]["bankID"] && api["pageParam"]["bankID"] == 0 && api["pageParam"]["bank"]) {
            $(".otherBank").show();
            $("#otherBankName").val(api["pageParam"]["bank"])
        }
        if (api["pageParam"]["khh"]) {
            $("#khh").val(api["pageParam"]["khh"]);
        }
        $("#delegate").click(function () {
            if (!$('#idname').val()) {
                app.toast("持卡人姓名不能为空");
                return
            }
            if (!$('#bankcard').val()) {
                app.toast("银行卡号不能为空");
                return
            }
            if (!$('#khh').val()) {
                app.toast("银行名称不能为空");
                return
            }
            if (!$('#swiftCode').val()) {
                app.toast("银行卡编码不能为空");
                return
            }
            if (!$("#code").val()) {
                app.toast("验证码不能为空");
                return
            }
            var dataChoose = $('#sel option:selected').data("id");
            var dataBankChoose = $("#chooseBankType option:selected").val();
            var data = {
                "token": account.token,
                "id_name": $('#idname').val(),
                "currency_code": "CNY",
                "user_bank_card_id": $('#sel option:selected').data("id"),
                "bank_name": dataChoose == 0 ? ($("#otherBankName").val().trim()) : ($('#sel option:selected').val()),
                "bank_card_no": $('#bankcard').val().replace(/\s*/g, ""),
                "bank_khh_name": $('#khh').val(),
                "smscaptcha": $("#code").val()
            }
            app.log("param", data);
            app.ajax({
                param: {
                    method: "post",
                    url: app.config.url + "member/userBankCardUpdate",
                    data: {
                        values: data
                    },
                    callback: function (ret, err) {
                        app.log("add_card", "返回：" + JSON.stringify(ret));
                        if (ret.code == 1) {
                            app.toast("绑定成功");
                            app.trigger("add_card_success", {
                                currencyCode: currencyCode
                            });
                            app.tout(100, function () {
                                api.closeWin();
                            });
                        } else {
                            app.toast(ret.message)
                        }
                    }
                },
                extra: {
                    isflower: true
                }
            });
        });
        $('#bankcard').on('keyup propertychange', function (e) {
            var thisVal = $(this).val();
            if (/\S{5}/.test(thisVal)) {
                $(this).val(thisVal.replace(/[^\d]/g, '').replace(/(.{4})/g, "$1 "));
            }
        })
        $('#sel').change(function () {
            var p1 = $(this).children('option:selected').data("id");
            if (p1 == 0) {
                $(".otherBank").show();
            } else {
                $(".otherBank").hide();
                $("#otherBankName").val("");
            }
        })

        function getCodeCallback() {
            // 执行倒计时
            app.countDown(60, function (value) {
                if (value.time != 0) {
                    $("#getcode").css({
                        "textAlign": "center"
                    }).text(value.time + "s");
                } else {
                    $("#getcode").text("获取验证码").attr("disabled", false).bind("click");
                }
            });
            app.getSmslogin({
                blackBox: isCnyCaptcha == 1 ? _fmOpt.getinfo() : "",
                yzm_token: getCnySms
            }, function (ret) {
                if (ret.code == 200) {
                    app.toast("发送成功");
                } else {
                    app.toast(ret.message);
                }
            })
            // }
        }
        //CNY 同盾插件初始化
        _fmOpt = {
            display: 'bind', //popup方式渲染验证码
            container: '#getcode', //验证码button渲染的目标DOM，自动展现方式下必需，详情见后文
            area: '', //对于custom模式，弹出窗口的加载容器，详情见后文
            partner: "renrenkj",
            appName: "renrenkj_h5",
            width: "",
            height: "",
            fmb: true,
            initialTime: new Date().getTime(),
            token: "renrenkj" + "-" + new Date().getTime() + "-" + Math.random().toString(16).substr(2),
            env: 1,
            getinfo: function () {
                return "e3Y6ICIyLjUuMCIsIG9zOiAid2ViIiwgczogMTk5LCBlOiAianMgbm90IGRvd25sb2FkIn0=";
            }
        };
        var fm = document.createElement('script');
        fm.type = 'text/javascript';
        fm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.tongdun.net/captcha/main/tdc.js?ver=1.0&t=' + (new Date().getTime() / 600000).toFixed(0);
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(fm, s);
        _fmOpt.beforeValidate = function () {
            $("#getcode").attr("disabled", true).unbind("click");
            app.checkIsMechine("sms", function (ret, err) {
                if (ret.code == 200) {
                    isCnyCaptcha = ret.data;
                    if (isCnyCaptcha == 1) {
                        _fmOpt.onSuccess = function (validateToken) {
                            if (validateToken) {
                                getCnySms = validateToken;
                                getCodeCallback();
                            } else {
                                _fmOpt.reset();
                            }
                        };
                        return true;
                    } else {
                        getCodeCallback();
                        return false
                    }
                }
            })
            return true
        }
    }
    _fmOpt.onClose = function (params) {
        $("#getcode").text("获取验证码").attr("disabled", false).bind("click");
    }
</script>
<script id="listT" type="text/html">
{{~it:value:index}}
<option value="{{=value.id}}">{{=value.value}}</option>
{{~}}
</script>

</html>